<template>
    <view class="service-page flex">
        <view class="qr-code">
            <img
                class="w-[100%] h-[100%]"
                v-if="serviceData.qr_code"
                :src="getUrl(serviceData.qr_code)"
                alt=""
            />
        </view>
        <view class="title">{{ serviceData.title }}</view>
        <view class="info">
            <view class="item">服务时间：{{ serviceData.date_time }}</view>
            <view class="item">客服电话：{{ serviceData.mobile }}</view>
            <view class="item">联系QQ：{{ serviceData.qq }}</view>
        </view>
        <view class="mt-2 text-center w-full">
            <view class="w-[60%] inline-block">
                <u-button type="primary">保存二维码</u-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getUrl } from "@/utils/common";
import { serviceConfig } from "@/api/other";

const serviceData = ref(<any>{});

const getData = async () => {
    const res = await serviceConfig();
    serviceData.value = res;
};

getData();
</script>

<style lang="scss" scoped>
.service-page {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px;
    padding: 60px 0;
    border-radius: 6px;
    background-color: #ffffff;

    .qr-code {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 140px;
        background-color: #f8f8f8;
    }

    .title {
        margin-top: 10px;
        font-size: 15px;
        font-weight: 500;
    }

    .info {
        margin-top: 10px;
        color: #666;

        .item {
            margin: 4px 0;
            font-size: 14px;
        }
    }
}
</style>
